<template>
  <div style="color: #666">
   <div style="margin: 20px 0;">
     <div class="pd-10" style="font-size: 20px;color: #42b983;cursor: pointer">{{forum.title}}</div>
     <div style="font-size: 14px;margin-top: 10px;">
       <i class="el-icon-user-solid"></i><span>{{forum.name}}</span>
       <i class="el-icon-time" style="margin-left: 10px"></i><span>{{forum.addtime}}</span>
     </div>
     <el-card style="margin-top: 15px">
       <div >
         {{forum.content}}
       </div>
     </el-card>
   </div>
    <div style="margin: 30px 0">
<!--      评论-->
      <div style="margin: 10px 0">
        <div style="border-bottom: 1px solid orangered;padding: 10px 0;font-size: 20px">评论</div>
        <div style="padding: 10px 0">
          <el-input type="textarea" v-model="form.content" placeholder="请输入评论内容..."   maxlength="200"
                    show-word-limit
          ></el-input>
        </div>
        <div class="pd-10" style="text-align: right">
          <el-button type="primary" round @click="save">评论</el-button>
        </div>
      </div>
<!--      评论列表-->
      <div>
        <div v-for="item in contents" :key="item.id" style="border-bottom: 1px solid #ccc;padding: 10px 0;">

          <div style="display: flex">
            <!--          头像-->
            <div style="width: 50px">
              <img src="../../img/4.jpg" style="width: 40px;height: 40px;border-radius: 50%">
            </div>
            <!--          评论内容-->
            <div style="flex: 1">
              <b>{{item.username}}:</b>
              <span style="font-size: 15px;margin-left: 10px">{{item.content}}</span>
              <div style="display: flex">
                <div style="text-align: left;margin-top: 5px">
                  <i class="el-icon-time"></i><span>{{item.addtime}}</span>
                </div>
                <div style="text-align: right;flex: 1">
                  <el-button type="text" @click="reply(item.id)">回复</el-button>
                  <!--                v-if="item.userid == this.user.id" -->
                  <el-button type="text" style="color: red" @click="deleteDiscusss(item.id)" v-if="item.userid===user.id">删除</el-button>
                </div>
              </div>
              <!--          回复列表-->
            </div>
          </div>
<!--          回复内容-->
          <div v-if="item.children.length" v-for="suitem in item.children" :key="suitem.id" style="padding-left: 70px;">
            <!--          回复列表-->
            <div style="flex: 1; background-color: #cccccc ">
              <div>
                <b v-if="suitem.username !== suitem.pusername">{{suitem.username}}  -> @{{suitem.pusername}}:</b>
                <b v-else>{{suitem.username}}:</b>
                <span style="font-size: 15px;margin-left: 10px">{{suitem.content}}</span>
              </div>

              <div style="display: flex">
                <div style="text-align: left;margin-top: 5px">
                  <i class="el-icon-time"></i><span>{{suitem.addtime}}</span>
                </div>
                <div style="text-align: right;flex: 1">
                  <el-button type="text" @click="reply(suitem.id)">回复</el-button>
                  <!--                v-if="item.userid == this.user.id" -->
                  <el-button type="text" style="color: red" @click="deleteDiscusss(suitem.id)" v-if="suitem.userid===user.id">删除</el-button>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>

    <el-dialog title="回复" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" label-position="left">
        <el-form-item label="内容">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.contentReply" auto-complete="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import request from "@/utils/request";
export default {
  name: "Forum",
  data(){
    return {
      forum:{},
      contents:[],
      form:{},
      user: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
      dialogFormVisible: false
    }
  },
  created() {
    this.load()
    this.loadComment()
  },
  methods: {
    reply(pid){
      this.form={pid: pid}
      this.dialogFormVisible=true
    },
    load() {
      const id=this.$route.query.id
      request.get("forum/one?id="+id).then(res => {
        if (res.code=="200"){
        this.forum=res.data
        }

      })
      request.get("discusss/tree/"+id).then(res => {
        if (res.code=="200"){
          this.contents=res.data
        }

      })
    },
    loadComment(){
      const id=this.$route.query.id
      request.get("discusss/tree/"+id).then(res => {
        if (res.code=="200"){
          this.contents=res.data
        }
      })
  },
    save(){
      // if (!this.user.username){
      //   this.$message.warning("请登录后操作")
      //     return
      // }
      if (this.form.contentReply){
        this.form.content=this.form.contentReply
      }
          this.form.forumId=this.$route.query.id
      request.post("discusss",this.form).then(res =>{
        if (res.code=="200"){
          this.loadComment()
          this.form={}
          this.dialogFormVisible=false
          this.$message.success("评论成功")
        }else {
          this.$message.error("评论失败")
        }
      })
    },
    deleteDiscusss(id) {
      console.log(id)
      request.post("discusss/delete",id).then(res => {
        if (res.code == "200") {
          this.loadComment()
          this.$message.success("删除成功")
        } else {
          this.$message.error("删除失败")
        }
      })
    },
  }

}
</script>

<style scoped>

</style>